<template>
  <div class="content">
    <div class="left">
      <div class="top">
        <echarts-chart-1></echarts-chart-1>
      </div>
      <div class="center">
        <echarts-chart-2></echarts-chart-2>
      </div>
      <div class="bottom">
        <echarts-chart-3></echarts-chart-3>
      </div>
    </div>
    <div class="middle">
      <div style="width: 120px; position:absolute;top:300px;left:800px">
        <el-input
        v-model="input1"
        class="w-50 m-2"
        size="small"
        placeholder="实时流量: 12.3 m³/H"
        :prefix-icon="Search"
      />
      </div>
      <div style="width: 120px; position:absolute;top:400px;left:900px">
        <el-input
        v-model="input2"
        class="w-50 m-2"
        size="small"
        placeholder="实时流量: 12.3 m³/H"
        :prefix-icon="Search"
      />
      </div>
      <div style="width: 120px; position:absolute;top:500px;left:1200px">
        <el-input
        v-model="input3"
        class="w-50 m-2"
        size="small"
        placeholder="实时流量: 12.3 m³/H"
        :prefix-icon="Search"
      />
      </div>
    </div>
    <div class="right">
      <div class="top">
        <echarts-chart-4></echarts-chart-4>
      </div>
      <div class="center">
        <echarts-chart-5></echarts-chart-5>
      </div>
      <div class="bottom">
        <echarts-chart-6></echarts-chart-6>
      </div>
    </div>
  </div>
</template>

<script>
import EchartsChart1 from "../components/Line1.vue";
import EchartsChart2 from "../components/Line2.vue";
import EchartsChart3 from "../components/Line3.vue";
import EchartsChart4 from "../components/Line4.vue";
import EchartsChart5 from "../components/Line5.vue";
import EchartsChart6 from "../components/Line6.vue";
export default {
  data() {
    return {
      socket: null,
      message: "",
      input1: "",
      input2: "",
      input3: "",
      timer: null, 
    };
  },
  mounted() {
    this.timer = setInterval(function(){
      this.input1 = "实时流量:" +Math.random()*(15-10)+10+"m³/H";
      this.input2 = "实时流量:" +Math.random()*(25-10)+10+"m³/H";
      this.input3 = "实时流量:" +Math.random()*(45-10)+10+"m³/H";
    }, 1000)
  },
  created() {
    
    // 创建WebSocket连接
    this.socket = new WebSocket("ws://127.0.0.1:8000/ws/");

    // 处理WebSocket事件
    this.socket.onopen = (event) => {
      console.log("WebSocket connection opened:", event);
      this.socket.send("hello world");
    };

    this.socket.onmessage = (event) => {
      this.message = event.data;
    };

    this.socket.onclose = (event) => {
      console.log("WebSocket connection closed:", event);
    };

    this.socket.onerror = (event) => {
      console.error("WebSocket error:", event);
    };
  },
  beforeUnmount() {
    // 在组件销毁前关闭WebSocket连接
    if (this.socket) {
      this.socket.close();
    }
    clearInterval(this.timer);
  },
  methods: {
    fetchData() {
      this.$api
        .get("/")
        .then((response) => {
          // 处理响应数据
          console.log(response.data);
        })
        .catch((error) => {
          // 处理错误
          console.error(error);
        });
    },
  },
  components: {
    "echarts-chart-1": EchartsChart1,
    "echarts-chart-2": EchartsChart2,
    "echarts-chart-3": EchartsChart3,
    "echarts-chart-4": EchartsChart4,
    "echarts-chart-5": EchartsChart5,
    "echarts-chart-6": EchartsChart6,
  },
};
</script>

<style scoped>
.content {
  display: flex;
}

.left {
  width: 20vw;
  flex-direction: column;
  display: flex;
}

.middle {
  width: 60vw;
  background-image: url("../assets/img/bg2.png"); /* 设置背景图片的 URL */
  background-size: cover;
  background-position: center; /* 居中对齐背景图片 */
  background-repeat: no-repeat; /* 禁止背景图片重复平铺 */
}

.right {
  display: flex;
  flex-direction: column;
  width: 20vw;
}

.top {
  width: 20vw;
  height: 33vh;
  background-image: url("../assets/img/51.png"); /* 设置背景图片的 URL */
  background-size: cover;
  background-position: center; /* 居中对齐背景图片 */
  background-repeat: no-repeat; /* 禁止背景图片重复平铺 */
}

.center {
  width: 20vw;
  height: 33vh;
  background-image: url("../assets/img/51.png"); /* 设置背景图片的 URL */
  background-size: cover;
  background-position: center; /* 居中对齐背景图片 */
  background-repeat: no-repeat; /* 禁止背景图片重复平铺 */
}

.bottom {
  width: 20vw;
  height: 33vh;
  background-image: url("../assets/img/51.png"); /* 设置背景图片的 URL */
  background-size: cover;
  background-position: center; /* 居中对齐背景图片 */
  background-repeat: no-repeat; /* 禁止背景图片重复平铺 */
}
</style>